<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery easyui</title>
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#view1").click(function() {
					if($('#tt').tabs('exists', 'New Tab')) {
						$('#tt').tabs('select', 'New Tab');
					} else {
						var content = '<iframe  frameborder=0 width=100% height=100% marginheight=0 marginwidth=0 scrolling=yes src=http://www.163.com></iframe>';
						$('#tt').tabs('add', {
							title: 'New Tab',
							content: content,
							closable: true,
							tools: [{
								iconCls: 'icon-mini-refresh',
								handler: function() {
									alert('refresh');
								}
							}]
						});
					}
				});
			});
		</script>
	</head>

	<body class="easyui-layout">
		<div data-options="region:'north',title:'传智博客管理系统',split:true" style="height:100px;">北部区域</div>
		<div data-options="region:'west',title:'菜单导航',split:true" style="width:180px;">
			<div id="aa" class="easyui-accordion" data-options="fit:true">
				<div title="基本功能" data-options="iconCls:'icon-mini-add'">
					<ul id="tree" class="easyui-tree">
						<li>
							<span>顶层</span>
							<ul>
								<li>
									<span>第一层</span>
									<ul>
										<li>
											<span><a id="view1" href="javascript:void(0)">模块一</a></span>
										</li>
										<li>
											<span>链接二</span>
										</li>
										<li>
											<span>连接三</span>
										</li>
									</ul>
								</li>
								<li>
									<span>第二层</span>
									<ul>
										<li>
											<span><a href="#">连接一</a></span>
										</li>
										<li>
											<span>链接二</span>
										</li>
										<li>
											<span>连接三</span>
										</li>
									</ul>
								</li>
								<li>
									<span>第三层</span>
									<ul>
										<li>
											<span><a href="#">连接一</a></span>
										</li>
										<li>
											<span>链接二</span>
										</li>
										<li>
											<span>连接三</span>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<div title="系统管理" data-options="iconCls:'icon-mini-add'">
					模块二
				</div>
			</div>
		</div>
		<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
			<div id="tt" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">
				<div title="Tab1" data-options="closable:true" style="padding:20px;display:none;">
					tab1
				</div>
				<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
					tab2
				</div>
				<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
					tab3
				</div>
			</div>
		</div>
	</body>

</html>